<template>
  <div id="app">
    <h1>{{ title }}</h1>
<input type="text" v-model="item"/>
    <button @click ="add(item)">添加</button>
    <ul>
    <li v-for="(todo,idx) in todos" :id="idx" :class="{done:todo.done}">
     <label> {{idx+1}}.{{todo.value}}</label>
      <time>{{todo.created|date}}</time>

    </li>
    </ul>

      <todo :total="todos.length":done="done"/>
  </div>
</template>

<script>
    import todo from'./todo.vue'
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  moment.locale('zh-en')

export default {
  name: 'app',
    components:{todo},
  methods:{
    add:function(x){
      this.todos.push({value:this.item,done:false,created:new Date().getTime()})
    }
  },
    computed:{
        done:function(){
            var count=0;
            for (var i= 0;i < this.todos.length;i++){
                if(this.todos[i].done){
                    count++;
                }
            }
            return count;
        }
    },
  data () {
    return {
      item:'',
     title:"vue-todos",
      todos:[
        {value:"阅读一本关于前端开发的书",done:false,created:15002050203},
    {value:"补充范例代码",done:false,created:Date.now()},
    {value:"写心得",done:true}
      ]
    }
  },
  filters:{
    date(val){
        return moment(val).calendar();

    //  return new Date(val).getHours()+":"+new Date(val).getMinutes()+":"+new Date(val).getSeconds();
    }
  }
}
</script>

<style>
.done {text-decoration: line-through}
</style>
